import { Button, Modal, Space, Statistic, Tooltip } from 'antd';
import React, { useState } from 'react';
import ProCard from '@ant-design/pro-card';
import { ModalForm, ProFormText } from '@ant-design/pro-form';
import { connect } from 'umi';
import styles from '@/pages/trade/Item/index.less';
import RcResizeObserver from 'rc-resize-observer';
import ProTable from '@ant-design/pro-table';
import { EditOutlined, ExclamationCircleOutlined, RollbackOutlined } from '@ant-design/icons';

const BidCard = (props) => {
  const { dispatch, item, currentUser, trades } = props;

  const [responsive, setResponsive] = useState(false);

  const priceSort = (a, b) => {
    return a.price > b.price;
  };

  trades.sort(priceSort);

  const onFinish = (values) => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        ...values,
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: currentUser.id,
        toUserID: item.owner.id,
        type: 8,
      },
    });
    return true;
  };

  const onCancelFinish = () => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: currentUser.id,
        toUserID: item.owner.id,
        type: 9,
      },
    });
    return true;
  };

  const bidForm = (
    <ModalForm
      title="设置价格"
      trigger={
        <Button size="large" type="primary">
          出价
        </Button>
      }
      onFinish={onFinish}
    >
      <ProFormText
        name="price"
        label={'出价'}
        placeholder={'金额'}
        rules={[
          {
            required: true,
            message: '请输入金额',
          },
        ]}
      />
    </ModalForm>
  );

  const cancelForm = (
    <ModalForm
      title="取消交易"
      trigger={<Button size="large">取消交易</Button>}
      onFinish={onCancelFinish}
    ></ModalForm>
  );

  const ownerActions = [cancelForm];

  const buyerActions = [bidForm];

  const actions = item.owner.id === currentUser.id ? ownerActions : buyerActions;

  const acceptConfirm = (record) => {
    Modal.confirm({
      title: '确认接受报价?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        dispatch({
          type: 'item/addTrade',
          payload: {
            itemID: item.id,
            userID: currentUser.id,
            fromUserID: currentUser.id,
            toUserID: record.from.id,
            price: record.price,
            type: 7,
          },
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  const bidCard = (
    <RcResizeObserver
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <ProCard.Group
        className={styles.itemCard}
        title="进行中的交易"
        headerBordered
        direction="row"
        actions={actions}
      >
        <ProCard.Group direction={responsive ? 'column' : 'row'}>
          <ProCard>
            <Statistic title="交易类型" value="拍卖" />
          </ProCard>
          <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
          <ProCard>
            <Statistic title="起拍价格" value={item.price} />
          </ProCard>
          <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
          <ProCard>
            <Statistic
              title="最高出价"
              value={trades.length > 0 ? trades[trades.length - 1].price : 0}
            />
          </ProCard>
        </ProCard.Group>
        <ProCard.Divider type="horizontal" />
        <ProTable
          rowKey="id"
          headerTitle="出价列表"
          options={false}
          search={false}
          columns={[
            {
              title: '出价人',
              render: (_, record) => {
                return record.from.username;
              },
            },
            {
              title: '价格',
              dataIndex: 'price',
              valueType: 'money',
            },
            {
              title: '操作',
              valueType: 'option',
              render: (_, record) =>
                record.to.id === currentUser.id ? (
                  <Button
                    type="link"
                    onClick={() => {
                      acceptConfirm(record);
                    }}
                  >
                    接受
                  </Button>
                ) : (
                  ''
                ),
            },
          ]}
          dataSource={trades}
        ></ProTable>
      </ProCard.Group>
    </RcResizeObserver>
  );

  return <div>{item.status === 3 && bidCard}</div>;
};

export default connect(({ item, user }) => ({
  item: item.item,
  currentUser: user.currentUser,
}))(BidCard);
